<!doctype html>
<html lang="en" class="dark">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>MoQ Demo</title>

	<link rel="stylesheet" href="index.css">
	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>

<body>
	<!-- Show if this browser supports everything we need. -->
	<hang-support details></hang-support>

	<h3>Other demos:</h3>
	<ul>
		<li><a href="index.html">Watch a single broadcast.</a></li>
		<li><a href="publish.html">Publish a broadcast.</a></li>
		<li><a href="meet.html">Watch a room of broadcasts.</a></li>
	</ul>

	<h3>Tips:</h3>
	<p>
		The <code>hang-support</code> element is used to check if the browser supports all of the web APIs we need.
	</p>
	<p>
		Control which features are tested via the <code>mode</code> attribute.
		By default, all features are tested.
		<br/>
		<code class="language-typescript">const mode: "core" | "watch" | "publish" | "all" = "all";</code>
	</p>
	<p>
		Only show the element if some features are unsupported.
		By default, the element is always shown, but it's useful to only show it on partial/missing support.
		<br/>
		<code class="language-typescript">const show: "full" | "partial" | "none" = "full";</code>
	<p>
	<hr />
	<p>
		<b>NOTE:</b> Firefox and Safari incorrectly detect hardware acceleration.
	</p>
</body>

<script type="module" src="support.ts"></script>

</html>
